<template>
	<div class="car">
		<h3>我的购物车</h3>
		<el-table :data="list" border>
			<el-table-column label="图片" width="120">
				<template slot-scope="scope">
					<img :src="`${$ip}/api/public/showimg/${scope.row.book.pic}`" min-width="20" height="70"
						style="height: 50PX;width: 80px;" />
				</template>
			</el-table-column>
			<el-table-column prop="book.name" label="商品名称">
			</el-table-column>
			<el-table-column prop="price" label="商品价格">
			</el-table-column>
			<el-table-column sortable prop="num" label="商品数量">
				<template slot-scope="scope">
					<el-input-number :min="1" v-model="scope.row.num" @change="zz()"></el-input-number>

				</template>
			</el-table-column>
			<el-table-column prop="zprice" label="商品总价">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">

					<input type="checkbox" :value="scope.row" v-model="all" @change="bbb()" />
				</template>

				<el-checkbox v-model="all" @change="bbb()"></el-checkbox>
			</el-table-column>

		</el-table>
		<div class="car2" style="display: flex; margin-top: 2%;">
			<p>总价:{{zprice}}</p>
			<el-button @click="go()">去下单</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'pcshopCar',
		data() {
			return {
				list: [],
				zprice: 0,
				all: [],
				newlist: [],

			}
		},
		methods: {
			go() {
				if (this.all.length > 0) {
					this.$router.push({
						query: {
							user: this.all
						},
						path: '/pcgoOrder'

					});

				} else {
					this.$message.error('当前并未下单');
				}
			},
			bbb() {
				console.log(this.all);
				this.all = Array.from(new Set(this.all));
				console.log(this.small);
				let kk = 0
				this.all.forEach((item) => {
					kk += item.price * item.num;
				})
				this.zprice = kk;
			},
			zz() {
				for (let i in this.list) {
					this.list[i].zprice = this.list[i].num * this.list[i].price;
					console.log(this.list[i].zprice);
				}
			},
			show() {
				this.$get('/api/fore/cart/findMyCarts').then((resp) => {
					this.list = resp.data.data;
					for (let i in this.list) {
						this.list[i].zprice = this.list[i].num * this.list[i].price;
						console.log(this.list[i].zprice);
					}
					console.log(resp.data.data);
				});
			}
		},
		mounted() {
			this.show()
		}
	}
</script>

<style>
	.car {
		width: 80%;
		margin: 0 auto;
		text-align: center;
		margin-top: 5%;
	}

	.car h3 {
		margin-bottom: 2%;
	}

	.car table {

		width: 80%;
		margin-top: 1%;
	}
	.car2{
		margin-left: 46%;
	}
	.car2 p{
		margin-top: 1%;
	}
	.car2 button{
		border: none;
		margin-left: 1%;
	}
</style>